import React from 'react';
import Nav from 'shared/components/nav';
import LineSites from 'shared/components/lineSites';
import NoticeBar from './noticeBar';
import subwayColorEnum from '../consts/subwayColorEnum';
import Legend from './legend';
import './index.less';

const qianhuan = require('shared/static/qiehuan.png');

export default class WayDetail extends React.PureComponent {
  redirect(value) {
    // this.props.history.push(`/waydetail/${value}`);
  }

  render() {
    const { match: { params } } = this.props;
    return (
      [
        <Nav
          to="/"
          history={this.props.history}
          title={`${params.line}号线`}
          key="nav"
          style={{ backgroundColor: subwayColorEnum[params.line] }}
        />,
        <div className="subway-detail-container" key="subway-detail">
          <NoticeBar />
          <div className="subway-detail-header">
            <div className="station-desc">
              <div className="station-desc-item">
                <span>· 韦家碾</span>
                <div className="switch-direction">
                  <img src={qianhuan} alt="" />
                  <span>切换方向</span>
                </div>
              </div>
              <div className="station-desc-item">
                <span>·  科学城</span>
                <span>
                  终点切换为五根松
                </span>
              </div>
            </div>
            <div className="station-card station-now">
              <div className="station-now-label">当前车站</div>
              <div className="station-now-desc">
                <span className="station-now-name">天府广场</span>
                <div className="subyway-time">
                  <div>
                    <span className="subyway-time-label green">首</span>
                    <span className="subyway-time-value">05:42</span>
                  </div>
                  <div>
                    <span className="subyway-time-label red">末</span>
                    <span className="subyway-time-value">05:42</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="station-card postion-info">
              {
                [1, 2, 3].map(value => (
                  <div className="postion-info-item" key={value}>
                    <span className="postion-info-item-desc">第一辆车</span>
                    <div className="postion-info-item-time">
                      <span>2</span>
                      <span>min</span>
                    </div>
                    <span className="postion-info-item-desc">到达本站</span>
                  </div>
                ))
              }
            </div>
          </div>

          <LineSites />
          <Legend themeColor={subwayColorEnum[params.line]} />
        </div>,
      ]
    );
  }
}
